<template>
  <el-container>
    <el-header>喜虫后台管理系统</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: #545c64">
        <el-col :span="12">
          <el-menu
            router
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
          >
          <template v-for="m1 of top">
                <!-- 判断是否有子菜单,有进入这个 -->
                <el-submenu v-if="m1.children" :key="m1.index" :index="m1.path">
                    <template slot="title">
                        <i :class="m1.icon"></i>
                        <span>{{ m1.name }}</span>
                    </template>
                    <el-menu-item v-for="m2 in m1.children" :key="m2.id" :index="m2.path">
                        <i :class="m2.icon"></i>
                        <span>{{ m2.name }}</span>
                    </el-menu-item>
                </el-submenu>
                <!-- 没有则直接显示 -->
                <el-menu-item v-else :index="m1.path" :key="m1.index">
                    <i :class="m1.icon"></i>
                    <span>{{ m1.name }}</span>
                </el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-main> <router-view /></el-main>
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      top: [],
    };
  },
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    setPath() {
      const da = this.count;
      for (const { path, view } of da) {
        const dir = (path + "").substring(1);
        const aas = dir.split("/")[0];
        if (dir.split("/")[1] == undefined) {
          dir.split("/")[1] = "";
        }
        const aa = dir.split("/")[0] + dir.split("/")[1];
        console.log(dir.split("/")[1]);
        this.$router.addRoute("home", {
          path: path,
          name: aa,
          component: () => import(`@/views/${aas}/${view}`),
        });
      }
      const map = new Map();
      const top1 = [];
      for (const obj of da) {
        map.set(obj.id, obj);
      }
      for (const obj of da) {
        const parent = map.get(obj.pid);
        console.log(1)
        if (parent) {
          parent.children ??= [];
          parent.children.push(obj);
        } else {
          top1.push(obj);
        }
      }
      this.top = top1;
      console.log(this.top);
    },
  },
  mounted() {
    this.setPath();
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: calc(100vh - 60px);
}
.el-col {
  width: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  overflow-y: auto;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
